// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import pageTwo from './components/pageTwo.vue'

/*
options:[
  // 一个数组表示一行，元素均分宽度
  {
    type : 'domain', // required
    label : '域名',  // required
    keyName : 'domain',  // required
    defaultValue : 'www.baidu.com', // optional
    placeholder : '请输入域名', // optional
    rules : [{ required: true, message: '域名不可为空', trigger: 'blur' }] // optional
  },{
    type : 'domain',
    label : '域名',
    defaultValue : 'www.baidu.com',

  }
],

isReadOnly: true , // optional
okText : '', // optional
cancelText : '', // optional
onCancel:null, // required
onOk:null, // required

*/

const ruleMap = {
  domain: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  ip: [{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }]
};


Vue.component('my-form-com', {
  render(h) {
    // <-- h must be in scope

    let loop = this.options.map(item => {
      return <el-form-item label={item.label} prop={item.keyName}>
          <el-input v-model={this.formModel[item.keyName]} />
        </el-form-item>;
    });
    return <div>
        <this.a num="2"/>
        <el-form model={this.formModel} rules={this.rules} ref="ruleForm" label-width="100px" class="demo-ruleForm">
          {loop}
        </el-form>
        <button on-click={this.onTest}>test</button>
        <this.a />
      </div>;
  },
  data() {
    let options = this.options || [];
    let model = {};
    let rules = {};
    for (let item of options) {
      model[item.keyName] = item.defaultValue || '';
      rules[item.keyName] = ruleMap[item.keyName];
    }

    console.log(this.$options.components);

    return {
      formModel: model,
      rules: rules,
      a: 'page-two'
    };
  },
  props: {
    options: {
      type: Array,
      required: true
    },
    isReadOnly: {
      type: Boolean,
      required: false,
      default: false
    }
    // abc: {
    //   type: Number
    // }
  },
  components: {
    pageTwo
  },
  methods: {
    onTest() {
      console.log(this.formModel);
    }
  }
});
